<style>
.cl{ height: 21px; border: 1px solid #898c90; box-shadow: none; border-bottom-left-radius: 4px; border-top-left-radius: 4px; width: 19px; background: url(/Public/dwz146/themes/default/images/tabs/tabscontrol.png) no-repeat scroll 3px -51px transparent;cursor:pointer;}
.cr{ height: 21px; border: 1px solid #898c90; box-shadow: none; border-bottom-right-radius: 4px; border-top-right-radius: 4px; width: 19px; background: url(/Public/dwz146/themes/default/images/tabs/tabscontrol.png) no-repeat scroll -1px -201px transparent;cursor:pointer;}
.cl.disabled{background: url(/Public/dwz146/themes/default/images/tabs/tabscontrol.png) no-repeat scroll 3px -101px transparent;cursor:default;}
.cr.disabled{background: url(/Public/dwz146/themes/default/images/tabs/tabscontrol.png) no-repeat scroll -1px -251px transparent;cursor:default;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	ajaxHour();
});
function ajaxHour(){
	$.ajax({
		type: "post",
		url: "{:U('Site/counthour')}",
		dataType: 'json',
		success: function(msg){
			cl();
			$("#cr1").addClass("disabled");
			var months1=[],count1 = [];
			var months2=[],count2 = [];
			var mm1="",nn1="";
			var mm2="",nn2="";
			for(var i=(msg[0].length>=msg[1].length?msg[0].length-1:msg[1].length-1);i>=0;i--){
				months1.push(msg[0][i]? msg[0][i].date:msg[1][i].date);
				count1.push(msg[0][i]?msg[0][i].count:0);
				count1[count1.length-1] = parseInt(count1[count1.length-1]);
				months2.push(msg[1][i]?msg[1][i].date:0);
				count2.push(msg[1][i]?msg[1][i].count:0);
				count2[count2.length-1] = parseInt(count2[count2.length-1]);
			}
			if(msg[0].length>0 || msg[1].length > 0){
				var re1 = fullH(months1,count1,msg[0].length>0 ? msg[0][0].m:msg[1][0].m);
				var re2 = fullH(months2,count2,msg[0].length>0 ? msg[0][0].m:msg[1][0].m);
			}else{
				var re1 = fullH(months1,count1);
				var re2 = fullH(months2,count2);
			}
			
			for(var i=0;i<(re1[0].length>=re2[0].length?re1[0].length:re2[0].length);i++){
				mm1 += "<td>"+(re1[0][i] || re2[0][i])+'时'+"</td>";
				if(parseInt(re1[1][i]||0)!=0){
					nn1 += "<td><a onclick='detaild("+re1[1][i]+","+re1[0][i]+");' style='cursor:pointer;color:#2f69bf;'>"+re1[1][i]+'次'+"</a></td>";
				}else{
					nn1 += "<td>--</td>";
				}
				
				mm2 += "<td>"+(re2[0][i] || re1[0][i])+'时'+"</td>";
				if(parseInt(re2[1][i] ||0)!=0){
					nn2 += "<td><a onclick='detailb("+re2[1][i]+","+re1[0][i]+");' style='cursor:pointer;color:#7e9d02;'>"+re2[1][i]+'次'+"</a></td>";
				}else{
					nn2 += "<td>--</td>";
				}
			}
			$('#tt thead tr').html(mm1);
			$('#tt tbody tr').html(nn1);
			$('#yy thead tr').html(mm2);
			$('#yy tbody tr').html(nn2);
			//统计图表
			//line
			
			if(re1[0].length<1){
				return 0;
			}
			var arr = [];
			for(var i=0;i<re1[1].length;i++){
				arr.push(i);
				//alert(re2[1][i]);
			}
			var options = {
				axis: "0 0 1 1", // Where to put the labels (trbl)
				axisxstep: re1[0].length-1, // How many x interval labels to render (axisystep does the same for the y axis)
				axisxlables: re1[0],//['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
				axisystep: 20,
				shade:false, // true, false
				smooth:true, //曲线
				symbol:"circle"
			};

			// Make the raphael object
			$("#chartHolder").html("");
			var r = Raphael("chartHolder"); 
			
			var lines = r.linechart(
				20, // X start in pixels
				20, // Y start in pixels
				600, // Width of chart in pixels
				400, // Height of chart in pixels
				arr,//[0,1,2,3,4,5,6,7,8,9,10], // Array of x coordinates equal in length to ycoords
				[re1[1],re2[1]], // Array of y coordinates equal in length to xcoords
				options // opts object
			).hoverColumn(function () {
				this.tags = r.set();

				var box_x = this.x, box_y = 30,
					box_w = 100, box_h = 80;
				if (box_x + box_w > r.width) box_x -= box_w;
				var box = r.rect(box_x,box_y,box_w,box_h).attr({stroke: "#f00", "stroke-width": 1, r:5});
				this.tags.push(box);

				for (var i = 0; i < this.y.length; i++) {
					this.tags.push(r.blob(this.x, this.y[i], this.values[i]).insertBefore(this).attr([{ fill: "#f4e1be", stroke: "#000"}, { fill: this.symbols[i].attr("fill") }]));//ffa5009
					var t = r.text(box_x+20, box_y+10 + i*16,this.values[i]).attr({fill: this.symbols[i].attr("fill")})
					this.tags.push(t);
				}
				
				
			}, function () {
				this.tags && this.tags.remove();
			});

			lines.symbols.attr({ r: 6 });
			
		}
	});
}

function fullH(arr1,arr2,date){
	var re1 = [],re2=[];
	if(arguments.length == 3){
	
		var day = date;
	}else{
		var d = new Date(),day = d.getHours();
	}
	for(var i=0;i<=day;i++){
		re1.push(i);
		var j = retM(i,arr1);
		if(j>=0){
			re2.push(arr2[j]);
		}else{
			re2.push(0);
		}
	}
	return [re1,re2];
}
function fullM(arr1,arr2,date){
	var re1 = [],re2=[];
	if(arguments.length == 3){
	
		var day = date;
	}else{
		var d = new Date(),day = d.getHours();
	}
	for(var i=1;i<=day;i++){
		re1.push(i);
		var j = retM(i,arr1);
		if(j>=0){
			re2.push(arr2[j]);
		}else{
			re2.push(0);
		}
	}
	return [re1,re2];
}
function retM(i,arr){
	for(var j=0;j<arr.length;j++){
		if(i==arr[j]){
			return j;
		}
	}
	return -1;
}

function rN(n){
	if(n.toString().length<2){
			n = "0"+n;
			return n;
	}
	return n;
}
function cl(){
	if($("#cr2").hasClass("disabled")){
		return 0;
	}else{
		$("#ck2").hide();
		$("#ck1").show();
		$("#cr1").removeClass("disabled");
		//pie隐藏 
		$("#tx1").attr("class","btnView"); 
		$("#tx1").attr("title","图形展示");
		$("#zz").show();
		$("#chartHolder2").hide();
		$("#zz1").show();
	}
}
function cr(){
	if($("#cr1").hasClass("disabled")){
		return 0;
	}else{
		$("#ck1").hide();
		$("#ck2").show();
		$("#chartHolder2").html("");
	}
}
function detaild(times,date){
	$.ajax({
		type: "post",
		url: "{:U('Site/counthourd')}",
		dataType: 'json',
		data:{times:times,date:date},
		success: function(msg){
			$("#ck2").children("h2").html(date+"时点击量");
			$("#zz").find("thead").html("<tr><td>产品</td><td>点击时间</td><td>入口</td><td>客户ip</td></tr>");
			var $tbody = $("#zz1").find("tbody");
			var str = "";
			for(var i=0;i<msg.length;i++){
				str +="<tr><td>"+msg[i].name+"</td>"+"<td>"+msg[i].time+"</td>"+"<td>"+msg[i].referrer+"</td>"+"<td>"+msg[i].address+"</td>"+"</tr>";		
			}
			$tbody.html(str);
			$("#ck1").hide();
			$("#ck2").show();
			$(window).data("type","d"),$(window).data("datetype","hour"),$(window).data("date",date);
		}
	});
}
function detailb(times,date){
	$.ajax({
		type: "post",
		url: "{:U('Site/counthourb')}",
		dataType: 'json',
		data:{times:times,date:date},
		success: function(msg){
			$("#ck2").children("h2").html(date+"时曝光量");
			$("#zz").find("thead").html("<tr><td>产品</td><td>曝光时间</td><td>入口</td><td>客户ip</td></tr>");
			var $tbody = $("#zz1").find("tbody");
			var str = "";
			for(var i=0;i<msg.length;i++){
				str +="<tr><td>"+msg[i].name+"</td>"+"<td>"+msg[i].time+"</td>"+"<td>"+msg[i].referrer+"</td>"+"<td>"+msg[i].address+"</td>"+"</tr>";		
			}
			$tbody.html(str);
			$("#ck1").hide();
			$("#ck2").show();
			$(window).data("type","b"),$(window).data("datetype","hour"),$(window).data("date",date);
		}
	});
}
//月
function cl_month(){
	if($("#cr2_month").hasClass("disabled")){
		return 0;
	}else{
		$("#ck2_month").hide();
		$("#ck1_month").show();
		$("#cr1_month").removeClass("disabled");
		//pie隐藏 
		$("#tx1_month").attr("class","btnView"); 
		$("#tx1_month").attr("title","图形展示");
		$("#zz_month").show();
		$("#chartHolder2_month").hide();
		$("#zz1_month").show();
	}
}
function cr_month(){
	if($("#cr1_month").hasClass("disabled")){
		return 0;
	}else{
		$("#ck1_month").hide();
		$("#ck2_month").show();
		$("#chartHolder2_month").html("");
	}
}
function detaild_month(times,date){
	$.ajax({
		type: "post",
		url: "{:U('Site/countdayd')}",
		dataType: 'json',
		data:{times:times,date:date},
		success: function(msg){
			$("#ck2_month").children("h2").html(date+"日点击量");
			$("#zz_month").find("thead").html("<tr><td>产品</td><td>点击时间</td><td>入口</td><td>客户ip</td></tr>");
			var $tbody = $("#zz1_month").find("tbody");
			var str = "";
			for(var i=0;i<msg.length;i++){
				str +="<tr><td>"+msg[i].name+"</td>"+"<td>"+msg[i].time+"</td>"+"<td>"+msg[i].referrer+"</td>"+"<td>"+msg[i].address+"</td>"+"</tr>";		
			}
			$tbody.html(str);
			$("#ck1_month").hide();
			$("#ck2_month").show();
			$(window).data("type","d"),$(window).data("datetype","day"),$(window).data("date",date);
		}
	});
}
function detailb_month(times,date){
	$.ajax({
		type: "post",
		url: "{:U('Site/countdayb')}",
		dataType: 'json',
		data:{times:times,date:date},
		success: function(msg){
			$("#ck2_month").children("h2").html(date+"日曝光量");
			$("#zz_month").find("thead").html("<tr><td>产品</td><td>曝光时间</td><td>入口</td><td>客户ip</td></tr>");
			var $tbody = $("#zz1_month").find("tbody");
			var str = "";
			for(var i=0;i<msg.length;i++){
				str +="<tr><td>"+msg[i].name+"</td>"+"<td>"+msg[i].time+"</td>"+"<td>"+msg[i].referrer+"</td>"+"<td>"+msg[i].address+"</td>"+"</tr>";		
			}
			$tbody.html(str);
			$("#ck1_month").hide();
			$("#ck2_month").show();
			$(window).data("type","b"),$(window).data("datetype","day"),$(window).data("date",date);
		}
	});
}
//年
function cl_year(){
	if($("#cr2_year").hasClass("disabled")){
		return 0;
	}else{
		$("#ck2_year").hide();
		$("#ck1_year").show();
		$("#cr1_year").removeClass("disabled");
		//pie隐藏 
		$("#tx1_year").attr("class","btnView"); 
		$("#tx1_year").attr("title","图形展示");
		$("#zz_year").show();
		$("#chartHolder2_year").hide();
		$("#zz1_year").show();
	}
}
function cr_year(){
	if($("#cr1_year").hasClass("disabled")){
		return 0;
	}else{
		$("#ck1_year").hide();
		$("#ck2_year").show();
		$("#chartHolder2_year").html("");
	}
}
function detaild_year(times,date){
	$.ajax({
		type: "post",
		url: "{:U('Site/countfd')}",
		dataType: 'json',
		data:{times:times,date:date},
		success: function(msg){
			$("#ck2_year").children("h2").html(date+"月点击量");
			$("#zz_year").find("thead").html("<tr><td>产品</td><td>点击时间</td><td>入口</td><td>客户ip</td></tr>");
			var $tbody = $("#zz1_year").find("tbody");
			var str = "";
			for(var i=0;i<msg.length;i++){
				str +="<tr><td>"+msg[i].name+"</td>"+"<td>"+msg[i].time+"</td>"+"<td>"+msg[i].referrer+"</td>"+"<td>"+msg[i].address+"</td>"+"</tr>";		
			}
			$tbody.html(str);
			$("#ck1_year").hide();
			$("#ck2_year").show();
			$(window).data("type","d"),$(window).data("datetype","month"),$(window).data("date",date);
		}
	});
}
function detailb_year(times,date){
	$.ajax({
		type: "post",
		url: "{:U('Site/countfb')}",
		dataType: 'json',
		data:{times:times,date:date},
		success: function(msg){
			$("#ck2_year").children("h2").html(date+"月曝光量");
			$("#zz_year").find("thead").html("<tr><td>产品</td><td>曝光时间</td><td>入口</td><td>客户ip</td></tr>");
			var $tbody = $("#zz1_year").find("tbody");
			var str = "";
			for(var i=0;i<msg.length;i++){
				str +="<tr><td>"+msg[i].name+"</td>"+"<td>"+msg[i].time+"</td>"+"<td>"+msg[i].referrer+"</td>"+"<td>"+msg[i].address+"</td>"+"</tr>";		
			}
			$tbody.html(str);
			$("#ck1_year").hide();
			$("#ck2_year").show();
			$(window).data("type","b"),$(window).data("datetype","month"),$(window).data("date",date);
		}
	});
}
</script>
<div class="pageContent">
	<div class="tabs" currentIndex="0" eventType="click">
		<div class="tabsHeader">
			<div class="tabsHeaderContent">
				<ul>
					<li><a onclick="ajaxHour();;"><span>本日统计信息</span></a></li> <!--href="{:U('Site/flow_product_day')};" class="j-ajax"-->
					<li><a onclick="ajaxMonth();"><span>本月统计信息</span></a></li> <!-- href="{:U('Site/flow_product_month')}" class="j-ajax" -->
					<li><a onclick="ajaxYear();;"><span>本年统计信息</span></a></li> <!--href="{:U('Site/flow_product_year')}" class="j-ajax" -->
				</ul>
			</div>
		</div>
		<div class="tabsContent" style="height:auto;">
			<div id="a1">
				<div id="ck1">
					<div style="height:450px;">
						<div id="chartHolder" style="width: 850px;height: 450px;position:relative;float:left;"></div>
						<div style="float: left; margin-top: 15px;">
							<div style="float: left;" class="cl disabled"></div>
							<div  id="cr1" style="float: left;" class="cr disabled" onclick="cr();"></div>
							<div style="clear:both;"></div>
						</div>
					</div>
					
					<div class="pageContent">
						<div class="grid" id="tt"> 
							<h2 class="contentTitle" style="margin-top:15px;">产品点击量</h2>
							<div class="gridHeader">
								<div class="gridThead">
									
									<table style="width:100%;">
										<thead>
											<tr>
												
											</tr>
										</thead>
									</table>
								</div>
							</div>
							<div style="height:80px;overflow: auto;"  class="">
								<div class="gridTbody">
									<table style="width:100%;">
										<tbody>
										<tr>
											
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="pageContent">
						<div class="grid" id="yy">
							<h2 class="contentTitle">产品曝光量</h2>
							<div class="gridHeader">
								<div class="gridThead">
									<table style="width:100%;">
										<thead>
											<tr>	
											</tr>
										</thead>
									</table>
								</div>
							</div>
							<div style=" height: 80px; overflow: auto;" layouth="138" class="gridScroller">
								<div class="gridTbody">
									<table style="width:100%;">
										<tbody>
										<tr>	
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div id="ck2" class="grid">
					<h2 class="contentTitle" style="margin-top:15px;"></h2>
					<div style="margin: -41px 0 0 850px;position:absolute;">
						<div id="ct2" style="float: left;" class="cl" onclick="cl();"></div>
						<div style="float: left;" class="cr disabled"></div>
						<a id="tx1" class="btnView" title="视图查看" height="280" width="450" style="float:left;margin:1px;border: 1px solid #898C90;border-bottom-right-radius:4px;border-top-right-radius:4px;border-bottom-left-radius: 4px;border-top-left-radius: 4px;"  onclick="piea();" href="javascript:void(0);">编辑</a>
					</div>
					
					<div>
						<div class="gridHeader">
							<div class="gridThead">
								
								<table style="width:100%;" id="zz"><!--width:1695px;-->
									<thead>
										<tr>
											
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div style=" height: 80px; overflow: auto;" id="zz1" layouth="138" class="gridScroller"><!--width: 1695px;-->
							<div class="gridTbody">
								<table style="width:100%;">
									<tbody>
									<tr>
										
									</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div id="chartHolder2" style="display:none;"></div>
						<script type="text/javascript">
							function piea(){
								if($("#tx1 ").hasClass("btnView")){
									$("#tx1 ").attr("class","btnInfo");
									$("#tx1").attr("title","列表展示");
									$("#chartHolder2").html("");
								}else{
									$("#tx1").attr("class","btnView"); 
									$("#tx1").attr("title","图形展示");
									$("#chartHolder2").hide();
									$("#zz").show();
									$("#zz1").show();
									$("#chartHolder2").html("");
									return;
								}
								$.ajax({
									type: "post",
									url: "{:U('Site/pie')}",
									dataType: 'json',
									data:{datetype:$(window).data("datetype"),date:$(window).data("date"),type:$(window).data("type")},
									success: function(msg){
										var pieData = [],pieLegend=[];
										for(var i=0;i<msg.length;i++){
											pieData.push(parseInt(msg[i].count));
											pieLegend.push("%%.%% – "+msg[i].name);
										}
										$("#zz").hide();
										$("#zz1").hide();
										$("#chartHolder2").show();
										//
										/* Title settings */		
										title = "饼状图(按百分比)";
										titleXpos = 400;
										titleYpos = 85;

										/* Pie Data */
										pieRadius = 130;
										pieXpos = 150;
										pieYpos = 180;
										pieLegendPos = "east";
										var r = Raphael("chartHolder2");
										r.text(titleXpos, titleYpos, title).attr({"font-size": 20});
										var pie = r.piechart(pieXpos, pieYpos, pieRadius, pieData, {legend: pieLegend, legendpos: pieLegendPos});
										pie.hover(function () {
											this.sector.stop();
											this.sector.scale(1.1, 1.1, this.cx, this.cy);
											if (this.label) {
												this.label[0].stop();
												this.label[0].attr({ r: 7.5 });
												this.label[1].attr({"font-weight": 800});
											}
										}, function () {
											this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
											if (this.label) {
												this.label[0].animate({ r: 5 }, 500, "bounce");
												this.label[1].attr({"font-weight": 400});
											}
										});
										
									}
								});
							}	
						</script>
					</div>
				</div>
			</div>
			<script>
				function ajaxMonth(){
					$.ajax({
						type: "post",
						url: "{:U('Site/countday')}",
						dataType: 'json',
						success: function(msg){
							cl_month();
							$("#cr1_month").addClass("disabled");
							var months1=[],count1 = [];
							var months2=[],count2 = [];
							var mm1="",nn1="";
							var mm2="",nn2="";
							for(var i=(msg[0].length>=msg[1].length?msg[0].length-1:msg[1].length-1);i>=0;i--){
								months1.push(msg[0][i]? msg[0][i].date:msg[1][i].date);
								count1.push(msg[0][i]?msg[0][i].count:0);
								count1[count1.length-1] = parseInt(count1[count1.length-1]);
								months2.push(msg[1][i]?msg[1][i].date:0);
								count2.push(msg[1][i]?msg[1][i].count:0);
								count2[count2.length-1] = parseInt(count2[count2.length-1]);
							}
							if(msg[0].length>0 || msg[1].length > 0){
								var re1 = fullM(months1,count1,msg[0].length>0 ? msg[0][0].m:msg[1][0].m);
								var re2 = fullM(months2,count2,msg[0].length>0 ? msg[0][0].m:msg[1][0].m);
							}else{
								var re1 = fullM(months1,count1);
								var re2 = fullM(months2,count2);
							}
							
							for(var i=0;i<(re1[0].length>=re2[0].length?re1[0].length:re2[0].length);i++){
								mm1 += "<td>"+(re1[0][i] || re2[0][i])+'日'+"</td>";
								if(parseInt(re1[1][i]||0)!=0){
									nn1 += "<td><a onclick='detaild_month("+re1[1][i]+","+re1[0][i]+");' style='cursor:pointer;color:#2f69bf;'>"+re1[1][i]+'次'+"</a></td>";
								}else{
									nn1 += "<td>--</td>";
								}
								
								mm2 += "<td>"+(re2[0][i] || re1[0][i])+'日'+"</td>";
								if(parseInt(re2[1][i] ||0)!=0){
									nn2 += "<td><a onclick='detailb_month("+re2[1][i]+","+re1[0][i]+");' style='cursor:pointer;color:#7e9d02;'>"+re2[1][i]+'次'+"</a></td>";
								}else{
									nn2 += "<td>--</td>";
								}
							}
							$('#tt_month thead tr').html(mm1);
							$('#tt_month tbody tr').html(nn1);
							$('#yy_month thead tr').html(mm2);
							$('#yy_month tbody tr').html(nn2);
							//统计图表
							//line
							
							if(re1[0].length<1){
								return 0;
							}
							var arr = [];
							for(var i=0;i<re1[1].length;i++){
								arr.push(i);
								//alert(re2[1][i]);
							}
							var options = {
								axis: "0 0 1 1", // Where to put the labels (trbl)
								axisxstep: re1[0].length-1, // How many x interval labels to render (axisystep does the same for the y axis)
								axisxlables: re1[0],//['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
								axisystep: 20,
								shade:false, // true, false
								smooth:true, //曲线
								symbol:"circle"
							};

							// Make the raphael object
							$("#chartHolder_month").html("");
							var r = Raphael("chartHolder_month"); 
							
							var lines = r.linechart(
								20, // X start in pixels
								20, // Y start in pixels
								600, // Width of chart in pixels
								400, // Height of chart in pixels
								arr,//[0,1,2,3,4,5,6,7,8,9,10], // Array of x coordinates equal in length to ycoords
								[re1[1],re2[1]], // Array of y coordinates equal in length to xcoords
								options // opts object
							).hoverColumn(function () {
								this.tags = r.set();

								var box_x = this.x, box_y = 30,
									box_w = 100, box_h = 80;
								if (box_x + box_w > r.width) box_x -= box_w;
								var box = r.rect(box_x,box_y,box_w,box_h).attr({stroke: "#f00", "stroke-width": 1, r:5});
								this.tags.push(box);

								for (var i = 0; i < this.y.length; i++) {
									this.tags.push(r.blob(this.x, this.y[i], this.values[i]).insertBefore(this).attr([{ fill: "#f4e1be", stroke: "#000"}, { fill: this.symbols[i].attr("fill") }]));//ffa5009
									var t = r.text(box_x+20, box_y+10 + i*16,this.values[i]).attr({fill: this.symbols[i].attr("fill")})
									this.tags.push(t);
								}
								
								
							}, function () {
								this.tags && this.tags.remove();
							});

							lines.symbols.attr({ r: 6 });
							
						}
					});
				}
			</script>
			<div id="a2">
				<div id="ck1_month">
					<div style="height:450px;">
						<div id="chartHolder_month" style="width: 850px;height: 450px;position:relative;float:left;"></div>
						<div style="float: left; margin-top: 15px;">
							<div style="float: left;" class="cl disabled"></div>
							<div  id="cr1_month" style="float: left;" class="cr disabled" onclick="cr_month();"></div>
							<div style="clear:both;"></div>
						</div>
					</div>
					
					<div class="pageContent">
						<div class="grid" id="tt_month"> 
							<h2 class="contentTitle" style="margin-top:15px;">产品点击量</h2>
							<div class="gridHeader">
								<div class="gridThead">
									
									<table style="width:100%;">
										<thead>
											<tr>
												
											</tr>
										</thead>
									</table>
								</div>
							</div>
							<div style="height:80px;overflow: auto;"  class="">
								<div class="gridTbody">
									<table style="width:100%;">
										<tbody>
										<tr>
											
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="pageContent">
						<div class="grid" id="yy_month">
							<h2 class="contentTitle">产品曝光量</h2>
							<div class="gridHeader">
								<div class="gridThead">
									<table style="width:100%;">
										<thead>
											<tr>	
											</tr>
										</thead>
									</table>
								</div>
							</div>
							<div style=" height: 80px; overflow: auto;" layouth="138" class="gridScroller">
								<div class="gridTbody">
									<table style="width:100%;">
										<tbody>
										<tr>	
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div id="ck2_month" class="grid">
					<h2 class="contentTitle" style="margin-top:15px;"></h2>
					<div style="margin: -41px 0 0 850px;position:absolute;">
						<div id="ct2_month" style="float: left;" class="cl" onclick="cl_month();"></div>
						<div style="float: left;" class="cr disabled"></div>
						<a id="tx1_month" class="btnView" title="视图查看" height="280" width="450" style="float:left;margin:1px;border: 1px solid #898C90;border-bottom-right-radius:4px;border-top-right-radius:4px;border-bottom-left-radius: 4px;border-top-left-radius: 4px;"  onclick="piea_month();" href="javascript:void(0);">编辑</a>
					</div>
					
					<div>
						<div class="gridHeader">
							<div class="gridThead">
								
								<table style="width:100%;" id="zz_month"><!--width:1695px;-->
									<thead>
										<tr>
											
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div style=" height: 80px; overflow: auto;" id="zz1_month" layouth="138" class="gridScroller"><!--width: 1695px;-->
							<div class="gridTbody">
								<table style="width:100%;">
									<tbody>
									<tr>
										
									</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div id="chartHolder2_month" style="display:none;"></div>
						<script type="text/javascript">
							function piea_month(){
								if($("#tx1_month").hasClass("btnView")){
									$("#tx1_month").attr("class","btnInfo");
									$("#tx1_month").attr("title","列表展示");
									$("#chartHolder2_month").html("");
								}else{
									$("#tx1_month").attr("class","btnView"); 
									$("#tx1_month").attr("title","图形展示");
									$("#chartHolder2_month").hide();
									$("#zz_month").show();
									$("#zz1_month").show();
									$("#chartHolder2_month").html("");
									return;
								}
								$.ajax({
									type: "post",
									url: "{:U('Site/pie')}",
									dataType: 'json',
									data:{datetype:$(window).data("datetype"),date:$(window).data("date"),type:$(window).data("type")},
									success: function(msg){
										var pieData = [],pieLegend=[];
										for(var i=0;i<msg.length;i++){
											pieData.push(parseInt(msg[i].count));
											pieLegend.push("%%.%% – "+msg[i].name);
										}
										$("#zz_month").hide();
										$("#zz1_month").hide();
										$("#chartHolder2_month").show();
										//
										/* Title settings */		
										title = "饼状图(按百分比)";
										titleXpos = 400;
										titleYpos = 85;

										/* Pie Data */
										pieRadius = 130;
										pieXpos = 150;
										pieYpos = 180;
										pieLegendPos = "east";
										var r = Raphael("chartHolder2_month");
										r.text(titleXpos, titleYpos, title).attr({"font-size": 20});
										var pie = r.piechart(pieXpos, pieYpos, pieRadius, pieData, {legend: pieLegend, legendpos: pieLegendPos});
										pie.hover(function () {
											this.sector.stop();
											this.sector.scale(1.1, 1.1, this.cx, this.cy);
											if (this.label) {
												this.label[0].stop();
												this.label[0].attr({ r: 7.5 });
												this.label[1].attr({"font-weight": 800});
											}
										}, function () {
											this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
											if (this.label) {
												this.label[0].animate({ r: 5 }, 500, "bounce");
												this.label[1].attr({"font-weight": 400});
											}
										});
										
									}
								});
							}	
						</script>
					</div>
				</div>
			</div>
			
			<div id="a3">
				<script>
				function ajaxYear(){
					$.ajax({
						type: "post",
						url: "{:U('Site/countf')}",
						dataType: 'json',
						success: function(msg){
							cl_year();
							$("#cr1_year").addClass("disabled");
							var months1=[],count1 = [];
							var months2=[],count2 = [];
							var mm1="",nn1="";
							var mm2="",nn2="";
							for(var i=(msg[0].length>=msg[1].length?msg[0].length-1:msg[1].length-1);i>=0;i--){
								months1.push(msg[0][i]? msg[0][i].date:msg[1][i].date);
								count1.push(msg[0][i]?msg[0][i].count:0);
								count1[count1.length-1] = parseInt(count1[count1.length-1]);
								months2.push(msg[1][i]?msg[1][i].date:0);
								count2.push(msg[1][i]?msg[1][i].count:0);
								count2[count2.length-1] = parseInt(count2[count2.length-1]);
							}
							if(msg[0].length>0 || msg[1].length > 0){
								var re1 = fullM(months1,count1,msg[0].length>0 ? msg[0][0].m:msg[1][0].m);
								var re2 = fullM(months2,count2,msg[0].length>0 ? msg[0][0].m:msg[1][0].m);
							}else{
								var re1 = fullM(months1,count1);
								var re2 = fullM(months2,count2);
							}
							
							for(var i=0;i<(re1[0].length>=re2[0].length?re1[0].length:re2[0].length);i++){
								mm1 += "<td>"+(re1[0][i] || re2[0][i])+'月'+"</td>";
								if(parseInt(re1[1][i]||0)!=0){
									nn1 += "<td><a onclick='detaild_year("+re1[1][i]+","+re1[0][i]+");' style='cursor:pointer;color:#2f69bf;'>"+re1[1][i]+'次'+"</a></td>";
								}else{
									nn1 += "<td>--</td>";
								}
								
								mm2 += "<td>"+(re2[0][i] || re1[0][i])+'月'+"</td>";
								if(parseInt(re2[1][i] ||0)!=0){
									nn2 += "<td><a onclick='detailb_year("+re2[1][i]+","+re1[0][i]+");' style='cursor:pointer;color:#7e9d02;'>"+re2[1][i]+'次'+"</a></td>";
								}else{
									nn2 += "<td>--</td>";
								}
							}
							$('#tt_year thead tr').html(mm1);
							$('#tt_year tbody tr').html(nn1);
							$('#yy_year thead tr').html(mm2);
							$('#yy_year tbody tr').html(nn2);
							//统计图表
							//line
							
							if(re1[0].length<1){
								return 0;
							}
							var arr = [];
							for(var i=0;i<re1[1].length;i++){
								arr.push(i);
								//alert(re2[1][i]);
							}
							var options = {
								axis: "0 0 1 1", // Where to put the labels (trbl)
								axisxstep: re1[0].length-1, // How many x interval labels to render (axisystep does the same for the y axis)
								axisxlables: re1[0],//['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
								axisystep: 20,
								shade:false, // true, false
								smooth:true, //曲线
								symbol:"circle"
							};

							// Make the raphael object
							$("#chartHolder_year").html("");
							var r = Raphael("chartHolder_year"); 
							
							var lines = r.linechart(
								20, // X start in pixels
								20, // Y start in pixels
								600, // Width of chart in pixels
								400, // Height of chart in pixels
								arr,//[0,1,2,3,4,5,6,7,8,9,10], // Array of x coordinates equal in length to ycoords
								[re1[1],re2[1]], // Array of y coordinates equal in length to xcoords
								options // opts object
							).hoverColumn(function () {
								this.tags = r.set();

								var box_x = this.x, box_y = 30,
									box_w = 100, box_h = 80;
								if (box_x + box_w > r.width) box_x -= box_w;
								var box = r.rect(box_x,box_y,box_w,box_h).attr({stroke: "#f00", "stroke-width": 1, r:5});
								this.tags.push(box);

								for (var i = 0; i < this.y.length; i++) {
									this.tags.push(r.blob(this.x, this.y[i], this.values[i]).insertBefore(this).attr([{ fill: "#f4e1be", stroke: "#000"}, { fill: this.symbols[i].attr("fill") }]));//ffa5009
									var t = r.text(box_x+20, box_y+10 + i*16,this.values[i]).attr({fill: this.symbols[i].attr("fill")})
									this.tags.push(t);
								}
								
								
							}, function () {
								this.tags && this.tags.remove();
							});

							lines.symbols.attr({ r: 6 });
							
						}
					});
				}
			</script>
				<div id="ck1_year">
					<div style="height:450px;">
						<div id="chartHolder_year" style="width: 850px;height: 450px;position:relative;float:left;"></div>
						<div style="float: left; margin-top: 15px;">
							<div style="float: left;" class="cl disabled"></div>
							<div  id="cr1_year" style="float: left;" class="cr disabled" onclick="cr_year();"></div>
							<div style="clear:both;"></div>
						</div>
					</div>
					
					<div class="pageContent">
						<div class="grid" id="tt_year"> 
							<h2 class="contentTitle" style="margin-top:15px;">产品点击量</h2>
							<div class="gridHeader">
								<div class="gridThead">
									
									<table style="width:100%;">
										<thead>
											<tr>
												
											</tr>
										</thead>
									</table>
								</div>
							</div>
							<div style="height:80px;overflow: auto;"  class="">
								<div class="gridTbody">
									<table style="width:100%;">
										<tbody>
										<tr>
											
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="pageContent">
						<div class="grid" id="yy_year">
							<h2 class="contentTitle">产品曝光量</h2>
							<div class="gridHeader">
								<div class="gridThead">
									<table style="width:100%;">
										<thead>
											<tr>	
											</tr>
										</thead>
									</table>
								</div>
							</div>
							<div style=" height: 80px; overflow: auto;" layouth="138" class="gridScroller">
								<div class="gridTbody">
									<table style="width:100%;">
										<tbody>
										<tr>	
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div id="ck2_year" class="grid">
					<h2 class="contentTitle" style="margin-top:15px;"></h2>
					<div style="margin: -41px 0 0 850px;position:absolute;">
						<div id="ct2_year" style="float: left;" class="cl" onclick="cl_year();"></div>
						<div style="float: left;" class="cr disabled"></div>
						<a id="tx1_year" class="btnView" title="视图查看" height="280" width="450" style="float:left;margin:1px;border: 1px solid #898C90;border-bottom-right-radius:4px;border-top-right-radius:4px;border-bottom-left-radius: 4px;border-top-left-radius: 4px;"  onclick="piea_year();" href="javascript:void(0);">编辑</a>
					</div>
					
					<div>
						<div class="gridHeader">
							<div class="gridThead">
								<table style="width:100%;" id="zz_year"><!--width:1695px;-->
									<thead>
										<tr>
											
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div style=" height: 80px; overflow: auto;" id="zz1_year" layouth="138" class="gridScroller"><!--width: 1695px;-->
							<div class="gridTbody">
								<table style="width:100%;">
									<tbody>
									<tr>
										
									</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div id="chartHolder2_year" style="display:none;"></div>
						<script type="text/javascript">
							function piea_year(){
								if($("#tx1_year").hasClass("btnView")){
									$("#tx1_year").attr("class","btnInfo");
									$("#tx1_year").attr("title","列表展示");
									$("#chartHolder2_year").html("");
								}else{
									$("#tx1_year").attr("class","btnView"); 
									$("#tx1_year").attr("title","图形展示");
									$("#chartHolder2_year").hide();
									$("#zz_year").show();
									$("#zz1_year").show();
									$("#chartHolder2_year").html("");
									return;
								}
								$.ajax({
									type: "post",
									url: "{:U('Site/pie')}",
									dataType: 'json',
									data:{datetype:$(window).data("datetype"),date:$(window).data("date"),type:$(window).data("type")},
									success: function(msg){
										var pieData = [],pieLegend=[];
										for(var i=0;i<msg.length;i++){
											pieData.push(parseInt(msg[i].count));
											pieLegend.push("%%.%% – "+msg[i].name);
										}
										$("#zz_year").hide();
										$("#zz1_year").hide();
										$("#chartHolder2_year").show();
										//
										/* Title settings */		
										title = "饼状图(按百分比)";
										titleXpos = 400;
										titleYpos = 85;

										/* Pie Data */
										pieRadius = 130;
										pieXpos = 150;
										pieYpos = 180;
										pieLegendPos = "east";
										var r = Raphael("chartHolder2_year");
										r.text(titleXpos, titleYpos, title).attr({"font-size": 20});
										var pie = r.piechart(pieXpos, pieYpos, pieRadius, pieData, {legend: pieLegend, legendpos: pieLegendPos});
										pie.hover(function () {
											this.sector.stop();
											this.sector.scale(1.1, 1.1, this.cx, this.cy);
											if (this.label) {
												this.label[0].stop();
												this.label[0].attr({ r: 7.5 });
												this.label[1].attr({"font-weight": 800});
											}
										}, function () {
											this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
											if (this.label) {
												this.label[0].animate({ r: 5 }, 500, "bounce");
												this.label[1].attr({"font-weight": 400});
											}
										});
										
									}
								});
							}	
						</script>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<div class="tabsFooter">
			<div class="tabsFooterContent"></div>
		</div>
	</div>
</div>